{include file="public/account_head"}
<div class="pub_wid perfect_cont bgb" id="perfectAdd" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <div class="message widthauto radius">
        <h6>物流企业</h6>
        <h5>公司基础信息</h5>
        <ul class="att_box widthauto">
            <li><span class="img">企业LOGO：</span>
                <img style="width: 160px;height: 80px" v-bind:src="imageUrl" />
                <div class="fileInput left">
                    <input ref="inputer" type="file" name="upfile" id="upfile" @change="changepic()" class="upfile" accept="image/png, image/jpeg, image/gif, image/jpg" />
                    <!--                    <button class="upFileBtn" for="upfile" type="button" ></button>-->
                    <label style="display: inline-block" for="upfile" class="upFileBtn">点击上传</label>
                </div>
                <i>尺寸：400px*200px，大小不超过500kb</i></li>
            <li>
                <span>公司名称：</span>
                <input v-model="memberInfo.name" name="name" type="text"  class="bai" placeholder="请输入公司名称"/>
            </li>
            <li>
                <span>注册时间：</span>
                <input readonly  autoComplete="off"  name="company_time" type="text" id="company_time" class="five" placeholder="请选择日期"/>
            </li>
            <li>
                <span>注册资本：</span>
                <input v-model="memberInfo.fund" name="fund" type="text" class="five" placeholder="请输入金额"/>
                万元</li>
            <li data-toggle="distpicker">
                <span>所在地：</span>
                <select v-model="province" class="five" data-province="---- 选择省 ----">
                    <!--                    <option>请选择省</option>-->
                </select>
                <select v-model="city" class="five" data-city="---- 选择市 ----">
                    <!--                    <option>请选择市</option>-->
                </select>
                <select v-model="district" class="five" data-district="---- 选择区 ----">
                    <!--                    <option>请选择市</option>-->
                </select>
            </li>
            <li><span>详细地址：</span>
                <input v-model="memberInfo.home_address" name="home_address" type="text" class="bai" placeholder="请输入公司地址"/>
            </li>
            <li><span>官网地址：</span>
                <input v-model="memberInfo.website_url" name="website_url" type="text"  class="bai" placeholder="请输入公司官方网址"/>
            </li>
            <li><span>公司简介：</span>
                <textarea v-model="memberInfo.company_info" name="company_info" cols="" rows="" placeholder="请输入公司简介内容"></textarea>
            </li>
        </ul>
        <h5>联系方式</h5>
        <ul class="att_box widthauto">
            <li><span>联系人：</span>
                <input v-model="memberInfo.contacts" name="contacts" type="text" class="bai" placeholder="请输入联系人姓名"/>
            </li>
            <li><span>职位：</span>
                <input v-model="memberInfo.position" name="position" type="text" class="bai" placeholder="请输入联系人职位"/>
            </li>
            <li><span>固定电话：</span>
                <input v-model="memberInfo.landine_phone" name="landine_phone" type="text" class="bai" placeholder="请输入固定电话号码"/>
            </li>
            <li><span>手机号码：</span>
                <input v-model="memberInfo.mobile" name="mobile" type="text" class="bai" placeholder="请输入手机号码"/>
            </li>
            <li><span>邮箱地址：</span>
                <input v-model="memberInfo.email" name="email" type="text" class="bai" placeholder="请输入邮箱地址"/>
            </li>
            <li><span>微信号：</span>
                <input v-model="memberInfo.wechat" name="wechat" type="text" class="bai" placeholder="请输入联系人微信号"/>
            </li>
        </ul>
        <h5>运力实力报告</h5>
        <ul class="att_box widthauto">
            <li><span>服务类型:</span>
                <select v-model="changeTradeName" @change="setTradeNme(changeTradeName)" class="five">
                    <option value="">=添加服务类型=</option>
                    <option v-for="(elem,index) in tradeChildList" :value="elem.name">{{elem.name}}</option>
                </select>
            </li>
            <li class="lib">
                <span>&nbsp;</span>
                <b v-for="(item,index) in trade_name" >运输服务
                    <a @click="removeTradeName(index)"><img src="/static/index/public/images/delete.png" /></a>
                </b>
<!--                <b>仓储服务<a href="#"><img src="/static/index/public/images/delete.png" /></a></b></li>-->
            <li class="lia"><span>自有运力：</span>
                <input v-model="supplement.self_car" name="" type="text" class="six" placeholder="请输入自有运力车辆数"/>
                辆车</li>
            <li class="lia"><span>外协车辆：</span>
                <input v-model="supplement.subordinate_car" name="" type="text" class="six" placeholder="请输入可以外协车辆数"/>
                辆车</li>
            <li class="lia"><span>自购占比：</span>
                <input v-model="supplement.self_buying" name="" type="text" class="six" placeholder="请输入自购占比比例"/>
                %</li>
            <li class="lia"><span>挂靠占比：</span>
                <input v-model="supplement.subordinate_buying" name="" type="text" class="six" placeholder="请输入挂靠占比比例"/>
                %</li>
            <li><span>常跑路线：</span>
                <textarea v-model="supplement.line" name="" cols="" rows="" placeholder="例：北京-沈阳、郑州-新疆、南京-北京"></textarea>
            </li>
            <li class="lic"><span>资质概况：</span>
                <input v-model="certification" name="" type="text" class="bai" placeholder="例：大件运输证,道路运输证,危化品运输证"/>
<!--                <div>-->
<!--                    <b v-for="(item,index) in defaultCertification">-->
<!--                        <span @click.stop="setCertification(item)">{{item}}</span>-->
<!--                        <a><img @click="removeCertification(item)" src="/static/index/public/images/delete.png" /></a>-->
<!--                    </b>-->
<!--                </div>-->
            </li>
            <li><span>客户案例：</span>
                <textarea v-model="supplement.case" name="" cols="" rows="" placeholder="例：三全食品、双汇、蒙牛"></textarea>
            </li>
        </ul>
        <div class="submit">
            <a href="javascript:window.history.back()" class="lf">返回</a>
            <a @click="postData()" class="rg cur">提交审核</a>
        </div>
    </div>
</div>
{include file="public/account_footer"}
<!--全国省份-->
<script src="/static/util/distpicker/distpicker.min.js"></script>
<!--时间组件-->
<script src="/static/util/laydate/laydate.js"></script>
<script>
    $(document).ready(function(){
        $('#target').distpicker();
        // laydate.render({
        //     elem: '#company_time', //指定元素
        // });
    })

    var vmPerfectAdd = new Vue({
        el:'#perfectAdd',
        data:{
            province:'',//省份
            city:'',//市
            district:'',//区或者县
            company_time:'',
            memberPhone:'',
            member_category:2,//1.货主企业，2.物流企业
            memberInfo:{
            },
            supplement:{
            },
            imageUrl:'/static/index/public/images/default.jpg',
            tradeChildList:[],
            trade_name:[],
            changeTradeName:'',
            defaultCertification:['道路运输证','危化品运输证','大件运输证'],
            certificationArray:[],
            certification:'',
        },
        computed:{
            //计算属性 生成公司所在地
            address:function () {
                return this.province+","+this.city+","+this.district
            }
        },
        methods:{
            setCertificationPost(){
                var el =this;
                el.certification = ""
                    $.each(this.certificationArray,function (i,j) {
                        if(el.certification == ''){
                            el.certification = j
                        }else {
                            el.certification = el.certification+','+j
                        }
                    })
                // console.log(this.certification)
            },
            setCertification:function(name){
                var el = this;
                if(name == ''){
                    return
                }
                if(this.certificationArray.indexOf(name)==-1){
                    this.certificationArray.push(name)
                }
                this.setCertificationPost();
            },
            removeCertification:function(name){
                // console.log(index);
                // console.log(this.certificationArray)
                var k = this.certificationArray.indexOf(name)
                this.certificationArray.splice(k,1);
                this.setCertificationPost();
            },
            setTradeNme:function(name){
                if(name == ''){
                    return
                }
                if(this.trade_name.indexOf(name)==-1){
                    this.trade_name.push(name)
                }
            },
            removeTradeName:function(index){
                this.trade_name.splice(index,1);
            },
            getTradeChildList:function(){
                var el = this
                var postData = {
                    "trade_id":el.member_category
                }
                AjaxPost(postData,'/index/trade/getTradeChildByWhere').then((response=>{
                    if(response.status==1){
                        el.tradeChildList = response.result
                    }

                }))
            },
            changepic:function(){
                var el = this;
                var inputDOM = el.$refs.inputer;
                var files = inputDOM.files;
                var formData = new FormData();
                formData.append('files',files[0]);
                AjaxPost(formData,'/index/image/upload').then((response=>{
                    if(response.status==1){
                        $.customToastr('success',response.message)
                        this.imageUrl = response.result
                    }
                    console.log(response);
                }))
            },
            postData:function () {
                var memberInfo = {
                    ...this.memberInfo,
                    'logo':this.imageUrl,
                    'address':this.address,
                    'member_category':this.member_category
                }
                var supplement ={
                    ...this.supplement,
                    "trade_name":this.trade_name.toString(),
                    "certification":this.certification,

                }
                AjaxPost({'phone':this.memberPhone,"memberInfo":memberInfo,"supplement":supplement},'/index/member/addLogisticsInfoInfo').then((response=>{
                    console.log(response)
                    if(response.status==1){
                        localStorage.setItem("member_status", "0");
                        window.location.href='/index/member/auditLoading'
                    }
                }))
            }
        },
        mounted(){
            var el = this;
            el.memberPhone = localStorage.getItem("memberPhone")
            console.log(el.memberPhone)
            laydate.render({
                elem: '#company_time', //指定元素
                done: function (value,date,endDate) {
                    el.memberInfo.company_time =value
                }
            });
            if(localStorage.getItem("member_category") != null){
                el.member_category = localStorage.getItem("member_category")
            }

            this.$nextTick(function () {
                if(localStorage.getItem('memberId')){
                    if(localStorage.getItem('member_category')){
                        if(localStorage.getItem('member_category')==1){
                            window.location.href='/index/consignor/index'
                        }else if(localStorage.getItem('member_category')==2){
                            window.location.href='/index/logistics/index'
                        }else {
                            window.location.href='/index/member/loginSuccess'
                        }
                    }

                }else{
                    window.location.href='/index/member/login'
                }
                this.getTradeChildList();
            })
        }
    })
</script>